<template>
    <div class="home-page">
        <!-- 数据概览卡片 -->
        <div class="data-overview">
            <a-row :gutter="4">
                <a-col :span="6">
                    <a-card>
                        <template #cover>
                            <TeamOutlined style="font-size: 32px; color: #1890ff" />
                        </template>
                        <a-statistic title="总用户数" :value="1234" />
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card>
                        <template #cover>
                            <ShoppingOutlined style="font-size: 32px; color: #52c41a" />
                        </template>
                        <a-statistic title="总订单数" :value="5678" />
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card>
                        <template #cover>
                            <PayCircleOutlined style="font-size: 32px; color: #faad14" />
                        </template>
                        <a-statistic title="总收入" :value="98765" prefix="￥" />
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card>
                        <template #cover>
                            <RiseOutlined style="font-size: 32px; color: #ff4d4f" />
                        </template>
                        <a-statistic title="日增长率" :value="12.34" suffix="%" />
                    </a-card>
                </a-col>
            </a-row>
        </div>

        <!-- 图表区域 -->
        <div class="charts-area">
            <a-row :gutter="16" style="margin-top: 20px">
                <a-col :span="12">
                    <a-card title="访问量趋势">
                        <a-progress :percent="30" />
                        <a-progress :percent="50" status="active" />
                        <a-progress :percent="70" status="exception" />
                        <a-progress :percent="100" />
                    </a-card>
                </a-col>
                <a-col :span="12">
                    <a-card title="用户分布">
                        <a-table :columns="columns" :data-source="data" :pagination="false">
                            <template #bodyCell="{ column, text }">
                                <template v-if="column.dataIndex === 'status'">
                                    <a-tag :color="text === '活跃' ? 'green' : 'red'">
                                        {{ text }}
                                    </a-tag>
                                </template>
                            </template>
                        </a-table>
                    </a-card>
                </a-col>
            </a-row>
        </div>

        <!-- 系统信息 -->
        <a-card title="系统信息" style="margin-top: 20px">
            <a-descriptions>
                <a-descriptions-item label="系统名称">Admin.NET 通用权限管理系统</a-descriptions-item>
                <a-descriptions-item label="系统版本">1.0.0</a-descriptions-item>
                <a-descriptions-item label="服务器环境">Windows Server</a-descriptions-item>
                <a-descriptions-item label="数据库">SqlServer</a-descriptions-item>
                <a-descriptions-item label="运行时长">235天12小时</a-descriptions-item>
                <a-descriptions-item label="系统时间">2024-01-10 12:00:00</a-descriptions-item>
            </a-descriptions>
        </a-card>
    </div>
</template>

<script setup lang="ts" name="homePage">
import { onMounted } from 'vue';


const columns = [
    {
        title: '地区',
        dataIndex: 'area',
        key: 'area',
    },
    {
        title: '用户数',
        dataIndex: 'users',
        key: 'users',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
    }
]

const data = [
    {
        key: '1',
        area: '华东',
        users: 3200,
        status: '活跃',
    },
    {
        key: '2',
        area: '华南',
        users: 2800,
        status: '活跃',
    },
    {
        key: '3',
        area: '华北',
        users: 2500,
        status: '异常',
    },
    {
        key: '4',
        area: '西部',
        users: 1500,
        status: '活跃',
    },
]

onMounted(()=>{

})
</script>

<style lang='scss' scoped>
.home-page {
    :deep(.ant-card) {
        border-radius: 4px;
        
        .anticon {
            margin-bottom: 16px;
        }
    }

    .data-overview {
        .ant-card {
            text-align: center;
            
            .ant-statistic {
                .ant-statistic-title {
                    color: rgba(0,0,0,.45);
                }
                .ant-statistic-content {
                    color: rgba(0,0,0,.85);
                    font-size: 20px;
                }
            }
        }
    }
}
</style>